<template>
     <!--顶部导航栏 start-->
  <ExamMenu />
  <!--顶部导航栏 end-->
    <div class="privacy-container">
      <!-- 动态标题 -->
      <transition name="title-slide">
        <h1 class="main-title">
          <el-icon><Lock /></el-icon>
          隐私保护承诺
        </h1>
      </transition>
  
      <!-- 内容容器 -->
      <div class="content-wrapper">
        <!-- 核心原则卡片 -->
        <transition name="card-slide">
          <el-card class="principle-card">
            <div class="principle-grid">
              <div 
                v-for="(item, index) in principles"
                :key="index"
                class="principle-item"
              >
                <div class="icon-wrapper" :style="{ background: item.color }">
                  <component :is="item.icon" class="principle-icon" />
                </div>
                <h3>{{ item.title }}</h3>
                <p>{{ item.desc }}</p>
              </div>
            </div>
          </el-card>
        </transition>
  
        <!-- 详细条款折叠面板 -->
        <transition name="card-slide">
          <el-card class="clause-card">
            <template #header>
              <div class="card-header">
                <el-icon><Document /></el-icon>
                <span>详细条款说明</span>
                <el-tag type="info">更新于2025.04</el-tag>
              </div>
            </template>
  
            <el-collapse v-model="activeNames">
              <el-collapse-item
                v-for="(item, index) in clauses"
                :key="index"
                :name="index"
                :class="item.type"
              >
                <template #title>
                  <div class="clause-title">
                    <el-icon :class="item.icon" />
                    <span>{{ item.title }}</span>
                  </div>
                </template>
                <div class="clause-content">
                  <ul>
                    <li v-for="(point, pIndex) in item.points" :key="pIndex">
                      {{ point }}
                    </li>
                  </ul>
                  <el-alert 
                    v-if="item.warning"
                    :title="item.warning"
                    type="warning"
                    :closable="false"
                    class="clause-alert"
                  />
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </transition>
  
        <!-- 确认按钮 -->
        <transition name="button-scale">
          <div class="action-box">
            <el-button 
              type="primary" 
              class="confirm-btn"
              @click="handleConfirm"
            >
              <el-icon><Finished /></el-icon>
              我已阅读并理解隐私条款
            </el-button>
          </div>
        </transition>
      </div>
    </div>
        <!--底部 start-->
  <ExamFooter />
  <!--底部 end-->
  </template>
  
  <script setup lang="ts">
    import ExamFooter from '@/components/comm/ExamFooter.vue';
  import ExamMenu from '@/components/comm/ExamMenu.vue';
  import { ref } from 'vue'
  import {
    Lock,
    Document,
    Finished,
    User,
    Share,
    Delete,
    View,
    Setting,
    Warning
  } from '@element-plus/icons-vue'
  
  const activeNames = ref([0])
  const principles = ref([
    {
      icon: User,
      title: '最小必要',
      desc: '仅收集服务必需的个人信息',
      color: 'rgba(64, 158, 255, 0.1)'
    },
    {
      icon: Share,
      title: '限制共享',
      desc: '未经同意不向第三方提供数据',
      color: 'rgba(230, 162, 60, 0.1)'
    },
    {
      icon: Delete,
      title: '限期留存',
      desc: '用户注销后30天内删除数据',
      color: 'rgba(103, 194, 58, 0.1)'
    },
    {
      icon: View,
      title: '透明可控',
      desc: '随时查看和管理授权信息',
      color: 'rgba(245, 108, 108, 0.1)'
    }
  ])
  
  const clauses = ref([
    {
      type: 'collection',
      icon: 'icon-collect',
      title: '信息收集类型',
      points: [
        '账户信息：手机号/邮箱（用于注册登录）',
        '设备信息：设备型号、操作系统版本',
        '使用数据：IP地址、操作日志、考试记录'
      ]
    },
    {
      type: 'usage',
      icon: 'icon-usage',
      title: '数据使用方式',
      points: [
        '提供核心考试服务功能',
        '优化系统性能和用户体验',
        '生成匿名化统计数据',
        '检测和防范安全风险'
      ],
      warning: '我们绝不会出售您的个人信息'
    },
    {
      type: 'share',
      icon: 'icon-share',
      title: '数据共享场景',
      points: [
        '合规审计：向监管部门提供必要信息',
        '服务提供商：受保密协议约束的合作伙伴',
        '法律要求：响应司法或行政机关要求'
      ]
    },
    {
      type: 'rights',
      icon: 'icon-rights',
      title: '您的权利',
      points: [
        '查询、复制个人信息',
        '请求更正不准确信息',
        '注销账户并删除数据',
        '获取个人信息副本'
      ]
    }
  ])
  
  const handleConfirm = () => {
    ElMessage.success({
      message: '隐私条款确认成功',
      duration: 2000,
      showClose: true
    })
  }
  </script>
  
  <style lang="scss" scoped>
   // 主题色定义
   @use '@/assets/scss/variables' as *;
  .privacy-container {
    min-height: 100vh;
    padding: 60px 20px;
    background: linear-gradient(150deg, lighten($primary-color, 42%), #f8f9fa);
  
    .main-title {
      text-align: center;
      color: $primary-color;
      margin-bottom: 40px;
      font-size: 2.4em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      text-shadow: 2px 2px 4px rgba($primary-color, 0.1);
  
      .el-icon {
        font-size: 1.3em;
      }
    }
  
    .content-wrapper {
      max-width: 1000px;
      margin: 0 auto;
    }
  
    .principle-card {
      margin-bottom: 30px;
      border-radius: 15px;
      transition: transform 0.3s;
  
      &:hover {
        transform: translateY(-5px);
      }
  
      .principle-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 30px;
        padding: 20px;
  
        .principle-item {
          text-align: center;
          padding: 25px;
          background: white;
          border-radius: 12px;
          transition: all 0.3s;
  
          &:hover {
            box-shadow: 0 8px 20px rgba($primary-color, 0.1);
          }
  
          .icon-wrapper {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
  
            .principle-icon {
              color: $primary-color;
              font-size: 1.8em;
            }
          }
  
          h3 {
            color: $primary-color;
            margin: 15px 0;
            font-size: 1.2em;
          }
  
          p {
            color: #666;
            font-size: 0.95em;
            line-height: 1.6;
          }
        }
      }
    }
  
    .clause-card {
      margin-bottom: 30px;
      border-radius: 15px;
  
      :deep(.el-collapse-item__header) {
        font-size: 1.1em;
        padding: 15px;
        color: $primary-color;
      }
  
      :deep(.el-collapse-item__content) {
        padding: 15px 25px;
      }
  
      .clause-title {
        display: flex;
        align-items: center;
        gap: 10px;
  
        .el-icon {
          font-size: 1.2em;
        }
      }
  
      .clause-content {
        ul {
          padding-left: 20px;
          li {
            margin: 10px 0;
            color: #666;
            line-height: 1.6;
          }
        }
  
        .clause-alert {
          margin-top: 15px;
          background: rgba($warning-color, 0.08);
          border: 1px solid rgba($warning-color, 0.15);
        }
      }
    }
  
    .action-box {
      text-align: center;
      margin-top: 40px;
  
      .confirm-btn {
        padding: 18px 50px;
        font-size: 1.1em;
        letter-spacing: 1px;
        background: linear-gradient(45deg, $primary-color, darken($primary-color, 8%));
        border: none;
        transition: all 0.3s;
  
        &:hover {
          background: linear-gradient(45deg, darken($primary-color, 5%), darken($primary-color, 12%));
          transform: scale(1.05);
          box-shadow: 0 5px 15px rgba($primary-color, 0.3);
        }
  
        .el-icon {
          margin-right: 10px;
          font-size: 1.2em;
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    .privacy-container {
      padding: 40px 15px;
  
      .main-title {
        font-size: 1.8em;
      }
  
      .principle-grid {
        grid-template-columns: 1fr !important;
      }
  
      .confirm-btn {
        width: 100%;
        padding: 15px !important;
      }
    }
  }
  </style>